<template>
  <div class="app-container" style="background-color:rgba">
    <el-card style="margin-bottom:30px">
      <div>
        <el-row style="margin-bottom:30px">
          <span>Basic Information</span>
        </el-row>
        <el-row :gutter="20" style="margin-bottom:10px">
          <el-col :span="6"><span style="margin-right:10px;">Id</span></el-col>
          <el-col :span="8"><span>{{ orderdetailsinfo.id }}</span></el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom:10px">
          <el-col :span="6"><span style="margin-right:10px;">Order No.</span></el-col>
          <el-col :span="8"><span>{{ orderdetailsinfo.order_no }}</span></el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom:10px">
          <el-col :span="6"><span style="margin-right:10px;">Customer Name</span></el-col>
          <el-col :span="8"><span>{{ orderdetailsinfo.receiver_name }}</span></el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom:10px">
          <el-col :span="6"><span style="margin-right:10px;">Address</span></el-col>
          <el-col :span="8"><span>{{ orderdetailsinfo.address }}</span></el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom:10px">
          <el-col :span="6"><span style="margin-right:10px;">Time slot (Date & Time)</span></el-col>
          <el-col :span="8"><span>{{ orderdetailsinfo.timeslot }}</span></el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom:10px">
          <el-col :span="6"><span style="margin-right:10px;">Order Amount</span></el-col>
          <el-col :span="8"><span>{{ orderdetailsinfo.order_amount }}</span></el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom:10px">
          <el-col :span="6"><span style="margin-right:10px;">Order Status</span></el-col>
          <el-col :span="8"><span>{{ orderdetailsinfo.order_state_desc }}</span></el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom:10px">
          <el-col :span="6"><span style="margin-right:10px;">Order Time</span></el-col>
          <el-col :span="8"><span>{{ orderdetailsinfo.create_time }}</span></el-col>
        </el-row>

      </div>
    </el-card>
    <section>
      <my-test
        :goods-list="goods"
      />
    </section>
  </div>
</template>
<script>
import MyTest from './witablelist.vue'
import {
  getdetails,
  getdictionary
} from '@/api/handyFix/index'

export default {
  components: {
    MyTest
  },
  data() {
    return {
      orderdetailsinfo: {},
      witypeslist: [],
      witypesids: [],
      prioritylist: [],
      winames: '',
      staffsName: '',
      sexType: [],
      order_info: [],
      goods: []
    }
  },
  created() {
    this.getorderdetailsinfo()
    this.getwitypes()
    this.getpriority()
  },
  methods: {
    async getorderdetailsinfo() {
      this.orderdetailsinfo = await getdetails({ id: this.$route.query.id })
      // this.winames = this.orderdetailsinfo.wi.map(function(v) { return v.title }).toString()
      // this.staffsName = this.orderdetailsinfo.staffs.map(function(v) { return v.user_login }).toString()
      // this.sexType = this.orderdetailsinfo.wi
      this.orderdetailsinfo.create_time = this.orderdetailsinfo.create_time.replace(/\-/g, '').replace(/^(\d{2})(\d{2})(\d{4})$/, '$3-$2-$1')
      this.orderdetailsinfo.update_time = this.orderdetailsinfo.update_time.replace(/\-/g, '').replace(/^(\d{2})(\d{2})(\d{4})$/, '$3-$2-$1')

      this.orderdetailsinfo.address = this.orderdetailsinfo.receiver_info.condominium_name + ' Blk ' + this.orderdetailsinfo.receiver_info.block + ',#' + this.orderdetailsinfo.receiver_info.floor + '-' + this.orderdetailsinfo.receiver_info.unit
      this.goods = this.orderdetailsinfo.goods
    },
    async getwitypes() {
      this.witypeslist = await getdictionary({ dict_type: 'wi_type' })
    },
    async getpriority() {
      this.prioritylist = await getdictionary({ dict_type: 'priority' })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>

<style>
.el-table .warning-row {
  background: rgba(9, 124, 233, 0.836);
}
.el-table .success-row {
  background: #06e737;
}
</style>
